<template>
  <div class="system setting-system-mail absolute inset-0 flex flex-col">
    <BPageHeader name="System" :isView="false" icon="system|png">
      <template v-slot:action>
        <BRouterTab :options="tabs" v-model="activeQuery" />
      </template>
    </BPageHeader>

    <Fa v-if="activeQuery === '2fa'" />
    <ZContainer :noBorder="true" v-if="activeQuery === 'holidays'">
      <Holiday />
    </ZContainer>

    <ZContainer
      :noPadding="true"
      :noBorder="true"
      class="mail"
      v-loading="loading"
      v-if="activeQuery === 'mail'"
    >
      <div class="overflow-auto" style="padding-right: 16px">
        <UserFormMaking
          ref="userFormMaking"
          :visible="true"
          @envent="handleEvent"
          :userformData="userformData"
        />
        <el-button type="primary" @click="add">Update</el-button>
        <el-button @click="handleTestConnection" :loading="connectionloading"
          >Test Connection</el-button
        >
      </div>
    </ZContainer>
  </div>
</template>
<script>
import ContentHeader from '@/components/content-header/content-header.vue'
import UserFormMaking from '@/components/form-making/userFormMaking.vue'
import config from '@/utils/config'
import systemIcon from '@/assets/img/system.png'
import ZContainer from '@/components/storybook/z-container'
import BRouterTab from '@/components/storybook/b-router-tab/index'

import BPageHeader from '@/components/storybook/b-page-header/index'
import { tabs } from './index.schema'
import Mail from './mail'
import Fa from './fa'
import Holiday from './holiday'

export default {
  components: {
    UserFormMaking,
    ContentHeader,
    BRouterTab,
    BPageHeader,
    Mail,
    Fa,
    ZContainer,
    Holiday
  },
  data() {
    return {
      systemIcon,
      userformData: {
        isNew: true,
        formTitle: null,
        formCode: null,
        id: null
      },
      loading: false,
      result: {},
      connectionloading: false,

      activeQuery: null
    }
  },
  created() {
    this.getFormDataList()
  },
  computed: {
    tabs() {
      return tabs.filter(i => {
        if (this.$store.state.system.loginRouter === '/login') {
          return i.value !== '2fa'
        }

        if (i.value === '2fa') {
          return this.$hasPermission('sys:system:2fa')
        }

        return true
      })
    }
  },
  watch: {
    tabs: {
      handler() {
        this.activeQuery = this.tabs.length ? this.tabs[0].value : null
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    async getFormDataList() {
      this.loading = true
      const params = {
        current: 1,
        size: 1,
        desc: 'create_time',
        formCode: config.systemSettingMail
      }
      const { data: res } = await this.$interface.reports.getFormDataListApi(
        params
      )
      if (res.data.records.length > 0) {
        this.userformData = {
          isNew: false,
          formCode: config.systemSettingMail,
          id: res.data.records[0].id,
          formId: config.grantAccessFormId,
          expireTimestamp: res.data.records[0].dataContent.expireTimestamp
        }
        this.result = res.data.records[0].dataContent
        this.loading = false
      } else {
        this.userformData = {
          isNew: true,
          formCode: config.systemSettingMail,
          formTitle: 'Options'
        }
        this.loading = false
      }
    },
    add() {
      this.$refs.userFormMaking.addOrUpdateFormData()
    },
    async handleTestConnection() {
      this.$refs.userFormMaking.$refs.generateForm
        .getData()
        .then(async data => {
          this.connectionloading = true
          let form = {}
          Object.keys(data).forEach(key => {
            if (!key.includes('text')) form[key] = data[key]
          })
          try {
            await this.$interface.system.testConnectionSystemMail(form)
            this.$message.success('Connection Succeeded')
            this.connectionloading = false
          } catch (err) {
            if (err.response.status === 500)
              this.$message.error('Connection Failed')
            this.connectionloading = false
          }
        })
    },
    async handleEvent() {
      await this.getFormDataList()
    }
  }
}
</script>
<style lang="scss" scoped>
.setting-system-mail {
  .link-item {
    font-size: 14px;
    font-weight: 600;
    color: #262626;
    margin-left: 28px;
    &.headerLink {
      color: #0043ce;
      cursor: pointer;
    }
  }

  ::v-deep .el-form-item {
    margin-bottom: 0px;
    &__content {
      line-height: auto;
    }
    &.subtitle-text {
      margin-bottom: 5px !important;
    }
    &.describe-text {
      margin-top: 5px !important;
    }
    .el-checkbox {
      margin-bottom: -6px;
    }
  }
}
.mail {
  padding: 4px 0 4px 16px;
}
</style>
